<template>
	<view class="info-content">
		<ycy-top-bar>个人信息</ycy-top-bar>
		<u-toast ref="uToast"></u-toast>
		<img class="avatar" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/image/defaultAvatar.png'">
		<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
		<view class="info-wrapper">
			<view class="info-name" @click.stop="onEditName">{{userInfo.name}}</view>
			<view class="info-vip">
				<view class="vip-id">ID: {{userInfo.id}}</view>
				<view class="vip-box" v-if="!userInfo.isAdmin">
					<img style="width: 60px;height: 45px;transform: translateY(-14px);" src="@/static/image/vip.png">
					<view class="vip-text" style="top: 5%;left: 27%;letter-spacing: 2px;">游客</view>
				</view>
				<view class="vip-box" v-if="userInfo.isAdmin">
					<img style="width: 60px;height: 45px;transform: translateY(-14px);" src="@/static/image/vip.png">
					<view class="vip-text" style="top: 5%;left: 27%;letter-spacing: 2px;">管理</view>
				</view>
			</view>
		</view>
		<view class="login-btn" @click="onLogout">退出登录</view>
		<u-modal :show="isShowEdit" :showCancelButton="true" title="修改昵称" @cancel="onCanacel"  @confirm="onSubmitEdit">
			<u--form :borderBottom="false" labelWidth="80">
				<u-form-item label="新昵称" prop="name">
					<u--input v-model="inputName" border="bottom" clearable placeholder="请输入新昵称"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
	export default {
		created() {
			this.userInfo = this.$cache.GET_USERINFO();
		},
		data() {
			return {
				inputName: '',
				isShowEdit: false,
				userInfo: {}
			}
		},
		methods: {
			onLogout() {
				this.$cache.CLEAR_USERINFO();
				uni.reLaunch({ url: '/pages/login/index'});
			},
			async onChooseAvatar(e) {
				// this.avatar = JSON.stringify(e.detail.avatarUrl)
				console.log('获取用户头像', e.detail.avatarUrl)
				// this.$toast.success(this, '更换成功');
			
				const res = await this.$utils.chagneAvatar(e.detail.avatarUrl, this.userInfo.id);
				console.log('img', res)
				if (res.code == 200) {
					this.userInfo.avatarUrl = res.data.url;
					this.$cache.SET_USERINFO(this.userInfo);
					this.$toast.success(this, '头像更换成功');
				}else this.$toast.success(this, res.message);
			},
			onEditName() {
				this.inputName = '';
				this.isShowEdit = true;
			},
			onCanacel() {
				this.isShowEdit = false;
			},
			async onSubmitEdit() {
				if(this.inputName && this.inputName.length >= 10) {
					this.$toast.error(this,'昵称不超过10个字');
					return;
				}
				const res = await this.$api.user.save({  id: this.userInfo.id, openId: this.userInfo.openId, name: this.inputName });
				if(res.code == 200) {
					this.userInfo.name = this.inputName;
					this.$cache.SET_USERINFO(this.userInfo);
					this.onCanacel();
					this.$toast.success(this,'修改成功');
				}else {
					this.$toast.error(this,res.message);
					this.onCanacel();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.info-content {
	height: 100vh;
	position: relative;
	background-color: $green-bg-color;
	
	.avatar,.avatar-btn {
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 400rpx;
		border-radius: 200px;
	}
	
	.avatar-btn {
		background-color: transparent;
	}
	
	.info-wrapper {
		// border: 2px solid red;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translateX(-50%);
		
		.info-name {
			font-size: $uni-font-size-superlg;
			font-weight: bold;
			text-align: center;
			padding-bottom: $spacing-base;
		}
		.info-vip {
			display: flex;
			margin-top: 8rpx;
			.vip-id {
				width: 430rpx;
				display: flex;
				justify-content: flex-end;
			}
			.vip-box {
				position: relative;
				margin-left: 16rpx;
				.vip-text {
					position: absolute;
					color: #dcb998;
					font-size: 12px;
				}
			}
		}
	}
	
	.login-btn {
		width: 88%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
		transform: translateX(-50%);
		border-radius: 16rpx;
		letter-spacing: 4rpx;
		border: 2px solid white;
		box-shadow: -10rpx 10rpx 5px 0 rgba(0,0,0,0.2);
	}
}
</style>
